<template>
  <BasicContainer>
    <ElRow :span="24">
      <ElCol :xs="24" :sm="24" :md="4" class="flowablelaunch__tree">
        <FyTree v-model="form" :loading="loading" :option="option" :data="data" @node-click="nodeClick">
          <template #default="{ node }">
            <span class="el-tree-node__label">
              <span>
                <i class="el-icon-user-solid"></i>
                {{ (node || {}).label }}
              </span>
            </span>
          </template>
          <template #menu="scope">
            <div class="avue-tree__item" @click.native="tip(scope.node, scope.data)">自定义按钮</div>
          </template>
        </FyTree>
      </ElCol>
      <ElCol :xs="24" :sm="24" :md="20" class="flowablelaunch__main">
        <FyCurd
          ref="crud"
          v-model="form"
          :page.sync="page"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOption"
          right-search
          :before-open="handleOpenBefore"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-update="handleUpdate"
          @row-save="handleSave"
          @row-del="handleDel">
          <template #menuLeft>
            <ElButton type="primary" @click="handleAdd"> 新 增 </ElButton>
          </template>
          <template #menu="{ row }">
            <ElButton type="text" size="small" icon="el-icon-add" @click="editFlow(row)"> 设计 </ElButton>
            <ConfirmButton
              type="text"
              size="small"
              loadable
              message="你确定要部署该流程吗?"
              icon="el-icon-add"
              @click="processLaunch(row)">
              部署
            </ConfirmButton>
          </template>
        </FyCurd>
      </ElCol>
    </ElRow>
  </BasicContainer>
</template>

<script>
  import { getCategories, getFlowModelInfoPage, publishBpmn } from '@/api/admin/workitem'
  import { modelTableOption, treeOption } from '@/const/crud/admin/todo'
  import { delObj, saveOrUpdateModelInfo } from '@/module/admin/actusertaskconfig/api'

  export default {
    name: 'FlowableBpmnTreeTable',
    data() {
      return {
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: modelTableOption,
        form: {},
        loading: false,
        data: [],
        option: treeOption
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.loadCategories()
      },
      // 删除
      async handleDel(row) {
        if (!(row.status === 1)) {
          this.$message.warning('只能删除草稿状态的流程信息')
          return
        }
        await this.$confirm(`是否确认删除ID为${row.id}`, '提示', { type: 'warning' })
        await delObj(row.id)
        this.$message.success('删除成功')
        await this.getList(this.page)
      },
      // 更新
      async handleUpdate(row, index, done, loading) {
        try {
          await saveOrUpdateModelInfo(row)
          this.$message.success('修改成功')
          done()
          await this.getList(this.page)
          await this.editFlow(row)
        } catch (e) {
          loading()
        }
      },
      // 保存
      async handleSave(row, done, loading) {
        try {
          await saveOrUpdateModelInfo(row)
          this.$message.success('添加成功')
          done()
          await this.getList(this.page)
          await this.editFlow(row)
        } catch (e) {
          loading()
        }
      },
      // 列表查询
      getList(page, params) {
        if (this.$isBlank(params)) {
          params = {}
        }
        this.tableLoading = true
        getFlowModelInfoPage({ entity: params, query: { pageNum: page.currentPage, pageSize: 20 } })
          .then(response => {
            this.tableData = response.data.data.rows
            this.page.total = response.data.data.total
            // setTodoNum
            this.$emit('setTodoNum', this.page.total)
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 每页条数改变事件
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 当前页发生改变事件
      currentChange(current) {
        this.page.currentPage = current
      },
      handleAdd: function () {
        this.$refs.crud.rowAdd()
      },
      // 查询事件
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新事件
      refreshChange() {
        this.getList(this.page)
      },
      nodeClick(node) {},
      async processLaunch(item) {
        await publishBpmn(item.modelId)
        this.refreshChange()
        this.$message.success('部署成功!')
      },
      loadCategories() {
        getCategories({}).then(response => {
          this.data = response.data.data
        })
      },
      handleOpenBefore(show, type) {
        window.boxType = type
        show()
      },
      editFlow(row) {
        this.$router.push({ path: `/flowDesign/${row.modelKey}`, query: { tabTitle: `${row.name}流程` } })
      }
    }
  }
</script>
